<template>
  <a-spin :spinning="isLoading">
    <a-form layout="vertical" ref="formRef" :model="formData.data">
      <a-card size="small" :title="t('school-manage.title.contactsName')">
        <a-row v-for="(sendItem, sendIndex) in formData.data.contactsList"
               :key="sendIndex"
               :gutter="16"
               type="flex"
               justify="space-between"
               align="bottom"
               class="mb-15"
        >
          <a-col :span="4">
            <a-form-item :label="t('school-manage.label.contactsName')" class="mb-0">
                         <!-- :name="['contactsList', sendIndex, 'schAddressee']"
                         :rules="[{ required: true, message: '请输入联系人' }]"> -->
              <a-input v-model:value="sendItem.contactsName" :placeholder="placeHolder"/>
            </a-form-item>
          </a-col>
          <a-col :span="3">
            <a-form-item :label="t('school-manage.label.position')" class="mb-0">
              <a-input v-model:value="sendItem.contactsPosition" :placeholder="placeHolder" />
            </a-form-item>
          </a-col>
           <a-col :span="4">
            <a-form-item :label="t('school-manage.label.telephone')" class="mb-0">
              <a-input v-model:value="sendItem.contactsPhone" :placeholder="placeHolder" oninput="value=value.replace(/[^\d]/g,'')" />
            </a-form-item>
          </a-col>
          <a-col :span="3">
            <a-form-item :label="t('school-manage.label.emailPath')" class="mb-0">
              <a-input v-model:value="sendItem.contactsEmail" :placeholder="placeHolder"/>
            </a-form-item>
          </a-col>
          <a-col :span="2">
            <a-form-item :label="t('school-manage.label.gender')" class="mb-0">
              <a-input v-model:value="sendItem.contactsSex" :placeholder="placeHolder"/>
            </a-form-item>
          </a-col>
          <!-- <a-col :span="4">
            <a-form-item :label="t('school-manage.label.status')" class="mb-0">
              <a-input v-model:value="sendItem.contactsState" :placeholder="placeHolder"/>
            </a-form-item>
          </a-col> -->
          <a-col :span="4">
            <a-form-item :label="t('school-manage.label.address')" class="mb-0">
              <a-input v-model:value="sendItem.contactsOfficeAddress" :placeholder="placeHolder"/>
            </a-form-item>
          </a-col>
          <a-col :span="1">
            <a-button v-if="sendIndex === 0" type="primary" ghost @click="addSendItem">{{ t('button.add') }}</a-button>
            <a-button v-else type="danger" ghost @click="deleteSendItem(sendIndex)">{{ t('button.delete') }}</a-button>
          </a-col>
        </a-row>
      </a-card>
    </a-form>
  </a-spin>
</template>

<script>
import { reactive, ref, computed, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { upload } from "@/api/module/oss"
import { message } from "ant-design-vue"

export default {
  setup() {
    const { t } = useI18n()
    const placeHolder = '请输入'
    const isLoading = ref(false)
    const formRef = ref(null)
    const formData = reactive({
      data: {
        contactsList: []
      }
    })

    const logoFiles = computed(() => formData.data.files.filter(v => v.type === 'logo'))
    const contractFiles = computed(() => formData.data.files.filter(v => v.type === 'contract'))
    const otherFiles = computed(() => formData.data.files.filter(v => v.type === 'other'))
    const courseHeaderFiles = computed(() => formData.data.files.filter(v => v.type === 'courseHeader'))
    const courseFooterFiles = computed(() => formData.data.files.filter(v => v.type === 'courseFooter'))

    const addSendItem = () => {
      formData.data.contactsList.push({
        contactsDepartment: "",
        contactsSex: "",
        contactsEmail: "",
        contactsPhone: "",
        contactsPosition: "",
        contactsName: ""
      })
    }

    const deleteSendItem = sendIndex => {
      formData.data.contactsList.splice(sendIndex, 1)
    }

    // const addCalendarItem = () => {
    //   formData.data.schCalendarYearList.push({
    //     schCySemester: '',
    //     schCyBegindate: '',
    //     schCyExaminationdate: '',
    //     schHolidaydate: ''
    //   })
    // }

    const deleteCalendarItem = sendIndex => {
      formData.data.schCalendarYearList.splice(sendIndex, 1)
    }

    const submit = () => {
      return new Promise(resolve => {
        formRef.value.validate().then(() => {
          resolve({ modelForm: formData.data });
        }).catch(err => {
          resolve({...err, modelForm: formData.data })
        });
      });
    };

    const handleUpload = (data, type) => {
      isLoading.value = true
      const ajaxFormData = new FormData()
      ajaxFormData.append('file', data.file)
      upload(ajaxFormData).then(res => {
        if (res.code === 500) {
          message.error({ content: '上传图片失败' })
        } else {
          const { path: url, id: fileId, remark, name } = res.data
          formData.data.files.push({ type, url, fileId, remark, name })
        }
        isLoading.value = false
      })
    }

    const handleDelUpload = type => {
      formData.data.files = formData.data.files.filter(v => v.type !== type)
    }

    const updateFormData = data => {
      formData.data = data
      formData.data.contactsList.length === 0 && addSendItem()
      // formData.data.schCalendarYearList.length === 0 && addCalendarItem()
    }

    onMounted(() => {
      addSendItem()
      // addCalendarItem()
    })

    return {
      t,
      placeHolder,
      formRef,
      formData,
      isLoading,
      logoFiles,
      contractFiles,
      otherFiles,
      courseHeaderFiles,
      courseFooterFiles,
      addSendItem,
      deleteSendItem,
      // addCalendarItem,
      deleteCalendarItem,
      submit,
      updateFormData,
      handleUpload,
      handleDelUpload,
    }
  }
}
</script>
